import React, { useEffect } from "react";

import * as d3 from "d3";
import { VbpStatsByDeptI } from "../../../types";

interface PropsI {
  data: VbpStatsByDeptI[];
  watermarkText?: string;
}

const GroupBarChartByCadnDept: React.FC<PropsI> = (props) => {
  const { data, watermarkText = "" } = props;
  const refChart = React.useRef(null);

  useEffect(() => {
    if (refChart && refChart.current && data && data.length > 0) {
      const node = refChart.current;
      // console.log(data);

      var rectStep = 47; // 包含间隙的步长
      // 设定四周边距
      const margin = { top: 50, right: 360, bottom: 30, left: 120 };
      const width = 1280;
      const height = rectStep * data.length + margin.top + margin.bottom;

      // 计算最大值
      const maxPercent = d3.max(data, (d) => d.percent) || 0;

      // 设置比例尺
      const xScale = d3
        .scaleLinear()
        .domain([0, maxPercent])
        .range([0, width - margin.left - margin.right]);

      // console.log(xScale(0));

      const yScale = d3
        .scaleBand()
        .domain(data.map((d) => d.deptYbName + "-" + d.cadn)) // 每个药品在部门中的唯一标识
        .range([0, height - margin.top - margin.bottom]) // Y 轴高度
        .padding(0.3); // 带状比例尺的内外边距
      // console.log(yScale.bandwidth());

      const deptSet = new Set(data.map((d) => d.deptYbName));
      // d3.schemeSpectral()参数最小3，最大11
      const deptColorScale = d3
        .scaleOrdinal()
        .domain(deptSet)
        .range(d3.schemeSpectral[11]);

      const getDeptLableIndex = (dept: string, data: VbpStatsByDeptI[]) => {
        let startIndex = -1;
        let endIndex = -1;
        for (let i = 0; i < data.length; i++) {
          if (dept == data[i].deptYbName && startIndex == -1) {
            startIndex = i;
          } else if (
            (startIndex >= 0 &&
              endIndex == -1 &&
              dept !== data[i].deptYbName) ||
            (i == data.length - 1 && endIndex == -1)
          ) {
            endIndex = i;
          }
        }
        const index = startIndex + Math.ceil((endIndex - startIndex) / 2);
        // console.log(dept, startIndex, " ", endIndex, " ", index);
        return data[index];
      };

      d3.select(node).selectAll("svg").remove();
      var svg = d3
        .select(node)
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("viewBox", [0, 0, width, height]) // 后续rect等图是相对viewBox计算的，viewBox可随svg绽放
        .attr("style", "max-width: 100%; height: auto;");

      // 添加 x 轴
      svg
        .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`)
        .call(
          d3
            .axisTop(xScale)
            .tickSize(1)
            .tickFormat((d: any) => `${(d * 100).toFixed(0)}%`)
        );

      // 添加 y 轴
      svg
        .append("g")
        .attr("class", "yAxis")
        .attr("transform", `translate(${margin.left},${margin.top})`)
        .call(d3.axisLeft(yScale).tickSize(0))
        .selectAll(".domain")
        .remove();
      // 去掉自动加的标签，后面手动加
      svg.selectAll(".yAxis").selectAll("text").remove();

      // 绘制图形
      const bars = svg
        .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`)
        .selectAll(".bar")
        .data(data)
        .join("rect")
        .attr("class", "bar")
        .attr("x", xScale(0))
        .attr("y", (d: any) => {
          if (
            d.cadn.includes("单硝酸异山梨酯片") ||
            d.deptYbName.includes("单硝酸异山梨酯片")
          ) {
            console.log(d);
          }
          return yScale(d.deptYbName + "-" + d.cadn) || 0;
        })
        .attr("width", (d) => xScale(d.percent))
        .attr("height", yScale.bandwidth())
        .attr("fill", (d) => deptColorScale(d.deptYbName) as any);

      // 添加文本标签
      const fontSize = 16;
      const labels = svg
        .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`)
        .selectAll(".label")
        .data(data)
        .join("text")
        .attr("class", "label")
        .attr("font-size", fontSize)
        .attr("x", (d) => {
          return xScale(d.percent) + 16;
        })
        .attr(
          "y",
          (d) =>
            (yScale(d.deptYbName + "-" + d.cadn) || 0) +
            (yScale.bandwidth() + fontSize) / 2
        )
        .text(
          (d) =>
            d.cadn +
            `使用${d.amountSum}，占比任务量:` +
            (d.percent * 100).toFixed(2) +
            "%"
        )
        .attr("text-anchor", "start");

      // 添加科室名称标签
      svg
        .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`)
        .selectAll(".deptLabel")
        .data(deptSet)
        .join("text")
        .attr("class", "deptLabel")
        .attr("text-anchor", "middle")
        .attr("transform", "rotate(-90)")
        .attr("x", (d: any) => {
          // console.log(d);
          const result = getDeptLableIndex(d, data);
          // console.log(yScale(result.deptYbName + "-" + result.cadn) || 0);
          return -(yScale(result.deptYbName + "-" + result.cadn) || 0);
        }) // 横坐标标签居中
        .attr("y", -30)
        .text((d) => d);

      // 添加坐标轴标签
      svg
        .append("text")
        .attr("class", "x-label")
        .attr("text-anchor", "middle")
        .attr("x", margin.left + (width - margin.left - margin.right) / 2) // 横坐标标签居中
        .attr("y", 20) // 位于 x 轴下方
        .text("比例");

      svg
        .append("text")
        .attr("class", "y-label")
        .attr("text-anchor", "middle")
        .attr("transform", "rotate(-90)") // 旋转 90 度；旋转后x, y属性也受影响
        .attr("x", -(margin.top + (height - margin.top - margin.bottom) / 2)) // 横坐标标签居中
        .attr("y", 30) // 向上偏移
        .text("科室——药品");

      // 添加100％达标线
      svg
        .append("line")
        .attr("transform", `translate(${margin.left}, ${margin.top})`)
        .attr("x1", xScale(1))
        .attr("y1", 0)
        .attr("x2", xScale(1))
        .attr("y2", height - margin.top - margin.bottom)
        .attr("stroke", "green")
        .attr("stroke-width", 1);

      // 添加水印
      // const watermark = svg.append("g").attr("class", "watermark");
      // const watermarkSize = 400;
      // const columns = Math.ceil(width / watermarkSize);
      // const rows = Math.ceil((height / watermarkSize) * 2);
      // // 生成水印
      // for (let i = 0; i < rows; i++) {
      //   for (let j = 0; j < columns; j++) {
      //     watermark
      //       .append("text")
      //       .attr("x", j * watermarkSize)
      //       .attr("y", (i * watermarkSize) / 2)
      //       .attr("font-size", "4rem")
      //       .attr("fill", "rgba(0, 0, 0, 0.1)")
      //       // .attr("transform", "rotate(-45)")
      //       .text(watermarkText);
      //   }
      // }
    }

    // 清除副作用;
    return () => {
      d3.select(refChart.current).selectAll("*").remove();
    };
  }, [data]);

  return (
    <div>
      <div ref={refChart}></div>
    </div>
  );
};

export default GroupBarChartByCadnDept;
